<template>
  <div>
    <div v-for="(item, i) in testData" :key="i">
      name {{item.name}}
      <div>
        爱好 <button v-for="(like, j) in item.likes" :key="j">{{like.tab}}</button>
      </div>
      <div style="height:1px;background:red;"></div>
    </div>
    <button @click="changeLikes">改变爱好</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      testData: [
        {
          name: 'tom',
          likes: [{tab: '游泳'}, {tab: '跑步'}]
        },
        {
          name: 'sushan',
          likes: [{tab: 'kanshu'}, {tab: 'tingge'}]
        },
      ]
    }
  },
  methods: {
    changeLikes() {
      
      let a =[
        {
          name: 'tom',
          likes: [{tab: '游泳'}, {tab: '跑步'}]
        },
        {
          name: 'sushan',
          likes: [{tab: 'kanshu'}, {tab: 'tingge'}]
        },
      ]
      a[0].likes[0].tab = '000'
      this.testData = a
      let b = [1,2,3,4]
      let c =[0]
      console.log(c.push(...b));
      
      // console.log(a)
      // this.$set(this.testData, 'testData', a)
    }
  }
}
</script>

<style>

</style>